<template>
  <div class="container">
   <div class="title">
    员工管理
   </div>
   <div class="searchClass">
      <el-form class="form" ref="form" :model="formData" label-width="100px" label-position="right">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="账号">
              <el-input v-model="formData.zhanghao" placeholder="请输入账号/wwid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="formData.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码">
              <el-input v-model="formData.phone" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <template v-if="isShow">
            <el-col :span="8">
              <el-form-item label="邮箱">
                <el-input v-model="formData.name" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主管">
                <el-select v-model="formData.zhuguan" placeholder="请选择">
                  <el-option value='0'>主管1</el-option>
                  <el-option value='1'>主管2</el-option>
                  <el-option value='2'>主管3</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="部门">
                <el-select v-model="formData.dept" placeholder="请选择">
                  <el-option value='0'>部门1</el-option>
                  <el-option value='1'>部门2</el-option>
                  <el-option value='2'>部门3</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务属性">
                <el-select v-model="formData.ywsx" placeholder="请选择">
                  <el-option value='0'>业务属性1</el-option>
                  <el-option value='1'>业务属性2</el-option>
                  <el-option value='2'>业务属性3</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="账户状态">
                <el-select v-model="formData.zhzt" placeholder="请选择">
                  <el-option value='0'>账户状态1</el-option>
                  <el-option value='1'>账户状态2</el-option>
                  <el-option value='2'>账户状态3</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="人员状态">
                <el-select v-model="formData.ryzt" placeholder="请选择">
                  <el-option value='0'>人员状态1</el-option>
                  <el-option value='1'>人员状态2</el-option>
                  <el-option value='2'>人员状态3</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数据来源">
                <el-select v-model="formData.sjly" placeholder="请选择">
                  <el-option value='0'>数据来源1</el-option>
                  <el-option value='1'>数据来源2</el-option>
                  <el-option value='2'>数据来源3</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
        <el-row>
          <el-col :span="8" style="float: right;text-align: right;">
            <el-button size="small">查询</el-button>
            <el-button size="small">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="8" style="float: right;text-align: right;">
          <span v-if="isShow" @click="isShow=!isShow"><i class="el-icon-arrow-up"></i>收起</span>
          <span v-else @click="isShow=!isShow"><i class="el-icon-arrow-down"></i>展开</span>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <div class="ct_btn">
        <span>已选择<b></b>项</span>
        <div>
          <el-button class="btn_color" icon="el-icon-plus" size="small" @click="addEmployee">新增员工信息</el-button>
          <el-button class="btn_color" size="small">导入人员信息</el-button>
          <el-button class="btn_color" size="small">导出人员信息</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="登录账号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="wwid"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="邮箱"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="性别"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="手机号码"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="角色"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="入职时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="离职时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="主管"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="部门名称"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="BU Leader"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="所属渠道"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="Channel Leader"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="所属大区"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="负责大区"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="工作城市"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="Cost Center"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="长假标识"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="长假时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="是否考核奖金"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="考核奖金时间"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="强生销售人员"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="所属客户"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="职级"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="业务属性"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="账号状态"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="人员状态"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="数据来源"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="创建人"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="创建时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="修改时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="修改人"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="name"
          label="备注"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleEditStatus(scope.row, '停用')">停用</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleEditStatus(scope.row, '启用')">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="导入员工" :visible.sync="dialogVisible" :show-close="false">
      <div slot="title" style="display: flex; justify-content: space-between">
        <span style="line-height: 28px;">导入员工</span>
        <el-button size="mini" type="text" style="color: red;">下载模板</el-button>
      </div>
      <div>
        <el-form label-width="130px" label-position="right">
          <el-form-item label="导入文件:">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="fileList">
              <el-button size="small" type="primary">选择文件</el-button>
              <div slot="tip" class="el-upload__tip">未选择任何文件</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="重复数据处理方式:">
            <el-select v-model="type" placeholder="请选择">
              <el-option value='0'>跳过数据</el-option>
              <el-option value='1'>直接覆盖</el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div>
          导入情况：成功43条数据,失败2条记录
          <el-button size="mini" type="text">下载导入结果</el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name:'myConsole',
    data() {
        return {
          currentPage: 1,
          total: 1,
          pageSize: 10,
          multipleTable: [],
          fileList: [],
          type: '',
          dialogVisible: false,
          tableData: [
            {
              name: '测试数据'
            }
          ],
          isShow: false,
          formData: {
            zhanghao: '',
          }
        }
    },
    mounted() {
      console.log(1111, this)
    },
    methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.currentPage = 1
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.currentPage = val
      },
      handleSelectionChange(val) {
        this.multipleTable = val
      },
      // 添加员工
      addEmployee() {
        this.dialogVisible = true
      },
      // 编辑
      handleEdit(index, row) {
        console.log(index, row);
      },
      // 删除
      handleDelete(index, row) {
        this.$confirm(`${row.name}是否确认删除?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 修改状态
      handleEditStatus(row, type) {
        this.$confirm(`${row.name}是否确认${type}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      }
    }
  }
</script>
<style lang="less" scoped>
.container {
  background: #ccc;
  padding: 3px;
  height: 100%;
  width: 100%!important;
}
.content {
  background: #fff;
  padding: 20px 10px;
  .ct_btn {
    display: flex;
    justify-content: space-between;
    .btn_color {
      background: red;
      color: #fff;
    }
  }
}
.searchClass {
  background: #fff;
  margin: 10px 0;
  padding: 10px 0;
  .el-form {
    padding: 0 20px;
  }
  .el-form-item .el-select {
    width: 100%;
  }
  /deep/.el-form-item {
    margin-bottom: 5px;
    .el-form-item__label {
      line-height: 30px;
    }
    
    .el-form-item__content {
      line-height: 30px;
      .el-input__inner {
        line-height: 30px;
        height: 30px;
      }
      .el-input__icon {
       line-height: 30px; 
      }
    }
  }
}
.title {
  background: #fff;
  padding-left: 30px;
  position: relative;
  line-height: 50px;
  &:before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 15px;
    background: red;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.upload-demo {
  display: flex;
  justify-content: flex-start;
  .el-upload__tip {
    margin-top: 0;
  }
}
/deep/.el-dialog__header {
  background: #fff;
  border-bottom: 1px solid #ccc;
}
</style>